{% extends "security/base.html" %}
{% block title %}Ativar autenticação de dois fatores{% endblock %}
{% block content %}
<section class="k4w-security-card">
  <p class="eyebrow">SEGURANÇA DA CONTA</p>
  <h1>Ativar autenticação de dois fatores</h1>
  <p>Leia o QR Code com uma aplicação compatível, como Google Authenticator, Microsoft Authenticator, Authy ou 1Password.</p>
  <div class="k4w-2fa-setup-grid">
    <div class="k4w-qr-box">{{ qr_svg|safe }}</div>
    <div>
      <ol class="k4w-security-steps">
        <li>Abra a aplicação autenticadora no telemóvel.</li>
        <li>Adicione uma nova conta e leia o QR Code.</li>
        <li>Introduza abaixo o código de 6 dígitos apresentado.</li>
      </ol>
      <details class="k4w-secret-box"><summary>Não consegue ler o QR Code?</summary><code>{{ manual_secret }}</code></details>
      <form method="post" class="k4w-security-form">{% csrf_token %}
        <label>{{ form.token.label }}{{ form.token }}{% for error in form.token.errors %}<small class="field-error">{{ error }}</small>{% endfor %}</label>
        <button class="portal-button portal-button--primary" type="submit">Confirmar e ativar</button>
      </form>
    </div>
  </div>
</section>
{% endblock %}